<script setup lang="ts">
import AssetTypeFormItem from './asset-type-form-item.vue';
import { Plus as AppNutIconPlus, Del2 as AppNutIconDel2 } from '@nutui/icons-vue-taro';
import { state, addAssetItem, deleteAssetItem, copyAssetItem } from '../state';
import COPY from '/@/assets/image/icon/copy.png';
</script>
<template>
  <view class="asset-type-form">
    <!-- item -->
    <view class="asset-type-form__item" v-for="item in state.assetList" :key="item.id" :item="item">
      <view class="asset-type-form__header">
        <view class="asset-type-form__header--left">{{ item.title }}</view>
        <image :src="COPY" @click="copyAssetItem(item)" class="asset-type-form__header__image" />
        <app-nut-icon-del2 @click="deleteAssetItem(item.id)" v-if="item.deletable" />
      </view>
      <asset-type-form-item :item="item" />
    </view>
    <!-- 添加button -->
    <nut-button block plain shape="round" type="primary" @click="addAssetItem">
      <template #icon>
        <app-nut-icon-plus />
      </template>
      添加资产
    </nut-button>
  </view>
</template>
<style lang="scss">
.asset-type-form {
  &__header {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 30px;
    &--left {
      flex: 1;
    }
    &__image {
      width: 36px;
      height: 36px;
      margin-right: 20px;
    }
  }
}
</style>
